<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #canvas {
            border: 1px solid #ff0000;

        }
    </style>
</head>
<body>

    <canvas id="canvas" width="600" height="400"></canvas>

    <script>
        // 1、获取元素
        var myCanvas = document.querySelector("#canvas");
        var ctx = myCanvas.getContext("2d");
        
        // ctx.stroke();
        // ctx.moveTo(100,100);
        // ctx.lineTo(355,100);  100--->355。线的长度是255px
        // 黑色(rgb(0,0,0)===>>>白色(rgb(255,255,255)))

        // 线是由点构成的。给点设置颜色就会形成渐变色
        ctx.lineWidth = 50;//设置线的宽度

        for(let i=0;i<255;i++) {
            ctx.beginPath();
            ctx.moveTo(100+i,100);
            ctx.lineTo(101+i,100);
            // ctx.strokeStyle = "rgb("+i+","+i+","+i+")";
            ctx.strokeStyle = "rgb("+i+",0,0)";
            if (i>=254) {
                console.log(i);
            }
            ctx.stroke();
        }


        




    </script>
</body>
</html>